<template>
	<div class="common-layout">
		<el-container>
			<!-- 	页面头部 -->
			<el-header>
				<el-row>
					<el-col :span="4"></el-col>
					<el-col :span="2">
						<div style="margin-top: 5px;">
							<a href="/pagesIndex/shouYeIndex">首页</a>
						</div>
					</el-col>
					<el-col :span="2">
						<div style="margin-top: 5px;">
							<a href="/pagesIndex/huaYu">华语</a>
						</div>
					</el-col>
					<el-col :span="2">
						<div style="margin-top: 5px;">
							<a href="/pagesIndex/hanYu">日韩</a>
						</div>
					</el-col>
					<el-col :span="2">
						<div class="grid-content bg-purple-light" style="margin-top: 5px;">
							<a href="/pagesIndex/meiGou">欧美</a>
						</div>
					</el-col>
					<el-col :span="2">
						<div class="grid-content bg-purple-light" style="margin-top: 5px;">
							<a href="/pagesIndex/yingYue">纯音乐</a>
						</div>
					</el-col>
					<el-col :span="2">

					</el-col>
					<el-col :span="1">

					</el-col>
					<!-- 		 消息中心 -->
					<el-col :span="2">
						<el-badge :value="5" class="item">
							<a href="/pagesIndex/Grzx/News"><el-icon style="height: 40px;width: 80px; ">
									<Message style="height: 40px;width: 40px;" />
								</el-icon></a>
						</el-badge>
					</el-col>

					<!-- 用户中心 -->
					<el-col :span="1">

					</el-col>

					<el-col :span="1">

						<el-button v-if="!isLoggedIn" type="primary" @click="showLoginPage()">登录</el-button>



						<div v-else class="user-profile">
							<el-dropdown>
								<span class="el-dropdown-link">

									<img :src="user_tx" style="height: 40px;width: 40px; border-radius: 50%;" />
								</span>
								<template #dropdown>
									<el-dropdown-menu>
										<el-dropdown-item><router-link to="/pagesIndex/Grzx/Myzl"
												style="color: black;">个人中心</router-link></el-dropdown-item>
										<el-dropdown-item><router-link to="/pagesIndex/Grzx/Ltzx"
												style="color: black;">我的收藏</router-link></el-dropdown-item>
										<el-dropdown-item @click="getout()">退出登录</el-dropdown-item>

									</el-dropdown-menu>
								</template>
							</el-dropdown>
						</div>
					</el-col>

					<el-col :span="1" style="margin-left: 5px;"> <el-button v-if="!isRegister" type="primary"
							@click="showRegisterPage()">注册</el-button>
						<div v-else></div>
					</el-col>
					<el-col :span="1"></el-col>
				</el-row>
			</el-header>

		</el-container>
		<el-main>
			<!-- 路由显示区 显示子页面-->
			<router-view />
		</el-main>
	</div>
	<login-page ref="loginPageRef" @yincang="doFlushPage()"></login-page>
	<register-page ref="registerPageRef" @success="doFlushPage2()"></register-page>
</template>
<style scoped>
	a {
		text-decoration: none;
		color: white;
	}

	a:hover {
		color: red;
	}

	.common-layout {
		background-color: #F5F5F5;
	}

	.el-col {
		text-align: center;
		margin-top: 15px
	}

	.el-button {
		width: 100%;
		background-color: #111111;
		color: white;

	}

	.el-button:hover {
		color: #5CB85C;
	}

	.el-header {
		background-color: #111111;
		color: white;
	}

	#logoTxt {
		padding-top: 15px;
		font-size: 28px;
		font-family: "华文彩云";
	}

	.el-aside {
		width: 220px;
		background-color: #f2f2f2;
	}

	.el-container {
		width: 100%;
		min-height: 100%;

	}

	.el-main {
		padding: 0px 0px 0px;
		width: 100%;
	}

	#photoPanel {
		height: 110px;
		padding: 10px;
		margin: 0 20px;
		border-bottom: 1px solid gray;
	}

	#photoPanel div {
		text-align: center;
	}

	#photoPanel img {
		width: 50%;
		border-radius: 100%;
	}

	#photoPanel p {
		margin: 5px;
	}

	#photoPanel #online {
		font-size: 20px;
		color: #5CB85C;
	}



	.user-profile {
		position: relative;
	}

	.user-avatar {
		cursor: pointer;
	}

	.dropdown {
		position: absolute;

	}
</style>
<script setup>
	import {
		ArrowDown
	} from '@element-plus/icons-vue'
	import RegisterPage from './RegisterPage.vue'
	import {
		onMounted,
		ref
	} from 'vue'
	import LoginPage from './LoginPage.vue'
	import axios from 'axios';
	//默认头像
	const user_tx = ref('../assets/admin.jpg')


	//登录触发
	const loginPageRef = ref();
	const showLoginPage = () => {
		//getCode01();
		loginPageRef.value.handleLoginForm();
	}
	const isLoggedIn = ref(false); // 登录状态
	const isDropdownOpen = ref(true); // 下拉菜单是否打开
	const isRegister = ref(false);
	//注册触发
	const registerPageRef = ref();
	const showRegisterPage = () => {
		// getCode02();
		registerPageRef.value.handleRegisterForm();
	}

	//子操作父，登录成功就隐藏登录注册按钮
	const doFlushPage = () => {
		isLoggedIn.value = true;
		isRegister.value = true;
	}
	const doFlushPage2 = () => {
		isRegister.value = true;
		showLoginPage();
	}


	function toggleDropdown() {
		isDropdownOpen.value = !isDropdownOpen.value;
	}

	//退出登录

	const getout = () => {

		localStorage.clear();
		window.location.href = "/pagesIndex/shouYeIndex";
		isLoggedIn.value = false;
		isRegister.value = false;
	}


	//验证码
	// 常规验证码
	const getCode01 = () => {
		axios({
			url: '/api/user/yzm1',
			method: 'get',
		})
	}
	const getCode02 = () => {
		axios({
			url: '/api/user/yzm2',
			method: 'get',
		})
	}

	onMounted(() => {
		const user = JSON.parse(localStorage.getItem("user"));
		if (user != null && user != '') {
			user_tx.value = '/api/src/images/' + user.user_tx;
			doFlushPage();
		}

	});
</script>